<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>智能创作平台</title>

    <link rel="stylesheet" type="text/css" href="css/semantic_css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/site.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css//container.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/grid.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/header.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/image.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/menu.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/divider.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/segment.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/form.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/input.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/button.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_csslist.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/message.css">
    <link rel="stylesheet" type="text/css" href="css/semantic_css/icon.css">
    <script src="js/jquery.js"></script>
    <script src="js/form.js"></script>
    <script src="js/transition.js"></script>

    <style type="text/css">
        body {
            background-color: #DADADA;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("/images/banner1.png");
        }

        body > .grid {
            height: 95%;
        }

        .column {
            max-width: 360px;
            margin-top: 40px;
            padding-top: 20px !important;
            height: 520px;
            background-color: #FFFFFF;
        }

        a:hover {
            text-decoration-line: underline;
            text-decoration-color: #337AB7;
        }

        #jump {
            float: right;
            margin-top: -8px;
            margin-right: 22px;
        }

        #head {
            margin-top: -5px !important;
        }

        #img_cumt {
            height: 100px;
            width: 100px;
        }

        #register {
            background-color: #337AB7;
        }

        #copyright-text {
            float: right;
            margin-bottom: 50px;
            margin-right: 30px;
        }
        br {
            height: 1px;
        }
    </style>
    <script>
        $(document)
            .ready(function () {
                $('.ui.form')
                    .form({
                        fields: {
                            username: {
                                identifier: 'username',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '账号名称为空，请输入名称'
                                    }
                                ]
                            },
                            password: {
                                identifier: 'password',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '账号密码为空，请输入密码'
                                    },
                                    {
                                        type: 'length[6]',
                                        prompt: '你的账号需要由六位以上数字组成'
                                    }
                                ]
                            }
                        }
                    })
                ;
            })
        ;
    </script>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">
        <br>
        <img src="/images/logo.jpg"
             class="image" id="img_cumt">
        <h2 id="head">智能创作平台</h2>
        <form class="ui large form" onsubmit="return false;">
            <div class="ui stacked segment">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="username" id="username" placeholder="用户名"
                               onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password" id="password" placeholder="密码">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="password_again" id="password_again" placeholder="确认密码">
                    </div>
                </div>
                <div id="jump">
                    <a href="/login">已有账号，立即登录</a>
                </div>
                <br>
                <div class="ui fluid large teal submit button" id="register">注册</div>
            </div>

            <div class="ui error message"></div>
        </form>


    </div>

</div>
<div id="copyright-text" style="color:inherit;">
    <span><font color="#FFFFFF">版权所有： 中国矿业大学计算机学院</font></span>
    <br>
    <span><font color="#FFFFFF">学院官网：</font>
        <a class="default underline" href="http://cs.cumt.edu.cn/" target="_blank">http://cs.cumt.edu.cn/</a>
    </span>
</div>

<!--注册账号-->
<script type="text/javascript" charset="UTF-8">
    $("#register").on("click", function () {
        if ($("#password").val() == $("#password_again").val())
            $.ajax({
                url: "/user/create",
                type: "POST",
                data: {
                    name: $("#username").val(),
                    password: $("#password").val(),
                },
                resultType: "JSON",
                success: function (result) {
                    if (result.code === 200) {
                        alert(result.message);
                        window.location.href = "/login";
                    } else {
                        alert(result.message);
                        window.location.href = "/register";
                    }
                },
                error: function (result) {
                    alert(result.message);
                }
            });
        else {
            alert("两次密码输入不一致！");
            document.getElementById('password_again').value = '';
        }
    });
</script>
</body>

</html>
